<template>
  <div class="app-container">
    <a-layout>
      <a-layout-header class="header">
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }"
          @click="handleMenuClick">
          <a-menu-item key="setBuild">
            <router-link to="/setBuild">分层分户</router-link>
          </a-menu-item>
          <a-menu-item key="scanInfo">
            <router-link to="/scanInfo">楼栋信息</router-link>
          </a-menu-item>
          <a-menu-item key="setInfo">
            <router-link to="/setInfo">住户信息</router-link>
          </a-menu-item>
          <a-menu-item key="marker">
            <router-link to="/marker">标记工具</router-link>
          </a-menu-item>
          <a-menu-item key="fee">
            <router-link to="/fee">物业费管理</router-link>
          </a-menu-item>
          <a-menu-item key="personnel">
            <router-link to="/personnel">物业人员管理</router-link>
          </a-menu-item>
          <a-menu-item key="emergency">
            <router-link to="/emergency">应急管理</router-link>
          </a-menu-item>
          <a-menu-item key="monitor">
            <router-link to="/monitor">监控管理</router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout-content class="content">
        <div class="map-container">
          <keep-alive>
            <CesiumView></CesiumView>
          </keep-alive>
          <div class="overlay-container">
            <router-view v-slot="{ Component }">
              <component :is="Component" />
            </router-view>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup>
import router from '@/router'
import { ref, watch, onMounted } from 'vue';
import CesiumView from './views/CesiumView.vue'
import { useRoute } from 'vue-router';

const route = useRoute();
const selectedKeys = ref(['setBuild']);

// 组件挂载时，确保路由指向分层分户
onMounted(() => {
  if (route.path === '/') {
    router.push('/setBuild');
  }
  // 根据当前路由设置选中的菜单项
  const path = route.path;
  if (path.includes('/setBuild')) {
    selectedKeys.value = ['setBuild'];
  } else if (path.includes('/setInfo')) {
    selectedKeys.value = ['setInfo'];
  } else if (path.includes('/scanInfo')) {
    selectedKeys.value = ['scanInfo'];
  } else if (path.includes('/emergency')) {
    selectedKeys.value = ['emergency'];
  } else if (path.includes('/marker')) {
    selectedKeys.value = ['marker'];
  } else if (path.includes('/areaDraw')) {
    selectedKeys.value = ['areaDraw'];
  } else if (path.includes('/personnel')) {
    selectedKeys.value = ['personnel'];
  }
});

// 监听路由变化
watch(() => route.path, (newPath) => {
  // 根据路由更新选中的菜单项
  if (newPath.includes('/setBuild')) {
    selectedKeys.value = ['setBuild'];
  } else if (newPath.includes('/setInfo')) {
    selectedKeys.value = ['setInfo'];
  } else if (newPath.includes('/scanInfo')) {
    selectedKeys.value = ['scanInfo'];
  } else if (newPath.includes('/emergency')) {
    selectedKeys.value = ['emergency'];
  } else if (newPath.includes('/marker')) {
    selectedKeys.value = ['marker'];
  } else if (newPath.includes('/areaDraw')) {
    selectedKeys.value = ['areaDraw'];
  } else if (newPath.includes('/personnel')) {
    selectedKeys.value = ['personnel'];
  } else if (newPath.includes('/fee')) {
    selectedKeys.value = ['fee'];
  }
}, { immediate: true });

// 处理菜单项点击
const handleMenuClick = (e) => {
  selectedKeys.value = [e.key];
}
</script>

<style scoped>
.app-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
}

.content {
  margin-top: 64px;
  height: calc(100vh - 64px);
  overflow: hidden;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.overlay-container>* {
  pointer-events: auto;
}

:deep(.ant-layout-header) {
  padding: 0;
  background: #001529;
}

:deep(.ant-menu) {
  background: transparent;
}

:deep(.ant-menu-item) {
  margin: 0 20px;
}

:deep(.ant-menu-item a) {
  color: rgba(255, 255, 255, 0.65);
}

:deep(.ant-menu-item-selected a) {
  color: #fff;
}
</style>